<template>
  <el-card>
    <h2>任务进度</h2>
    <el-steps style="max-width: 600px" :active="activeStep" align-center>
      <el-step title="待分配" description="任务处于待分配状态" />
      <el-step title="待服务" description="任务处于待服务状态" />
      <el-step title="服务中" description="任务正在服务中" />
      <el-step title="已完成" description="任务已完成" />
      <el-step title="被退单" description="任务被退单" />
      <el-step title="已取消" description="任务已取消" />
    </el-steps>
  </el-card>
  <el-card>
    <h2>任务信息</h2>
    <div>
      <p><strong>任务编号：</strong>{{ task.id }}</p>
      <p><strong>服务人员：</strong>{{ task.name }}</p>
      <p><strong>服务地址：</strong>{{ task.address }}</p>
      <p><strong>服务名称：</strong>{{ task.serveItemName }}</p>
      <p><strong>任务金额：</strong>{{ task.ordersAmount + '元'}}</p>
      <p><strong>手机号：</strong>{{ task.phone }}</p>
      <p><strong>客户姓名：</strong>{{ task.abname }}</p>
    </div>
  </el-card>
<!--  返回-->
  <el-button type="primary" @click="tz()">返回</el-button>
</template>


<script setup>
import { ref } from "vue";
import { findById ,findtask} from "@/api/task/task";
import {useRoute} from "vue-router";
import {router} from "@/router";


const activeStep = ref(0);
const route=useRoute();
const  id=route.query.id;

async function showStatus(id) {
  try {
    const res = await findById(id);
    // 假设 res.data.status 是从后端获取的状态码
    switch (res.data.data.taskStatus) {
      case 0:
        activeStep.value = 0;
        break;
      case 1:
        activeStep.value = 1;
        break;
      case 2:
        activeStep.value = 2;
        break;
      case 3:
        activeStep.value = 3;
        break;
      case 4:
        activeStep.value = 4;
        break;
      case 5:
        activeStep.value = 5;
        break;
      default:
        activeStep.value = 0;
        break;
    }
  } catch (error) {
    console.error('查询任务状态失败：', error);
    // 可以添加更详细的错误处理，比如显示错误消息给用户
  }
}

showStatus(id);

const task=ref({})
function findt(){
  findtask(id).then(res => {
    task.value=res.data.data
  })
}
findt()

function tz(){
  router.push({path:'/task/task'})
}
</script>
